<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


   <style>
       @keyframes spin{
           0%{
               transform: rotateX(0) rotateY(0);
           }
           100%{
               transform: rotateX(360deg) rotateY(360deg);
           }
       }
       html{
           height: 100%;
       }
       body{
           margin: 0px;
           /* 渐变背景色 */
           background: radial-gradient(white,black);
           height: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
        /* 设置3D视野 */
           perspective: 1000px;
       }
    #box{
       width: 300px;
       height: 300px;
       /* border: solid 4px red; */
       position: relative;
       /* 自身发生变形时，保留子元素的3D效果 */
       transform-style: preserve-3d;

        animation-name: spin;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
       /* transform: rotateY(30deg) rotateX(30deg); */
   }
   .pic{
       width: 300px;
       height: 300px;
       position: absolute;
       left: 0;
       top: 0;

       box-sizing: border-box;
       border: solid 10px purple;

       transition: all 1s;
   }
   .spic{

       width: 150px;
       height: 150px;
       position: absolute;
       left:75px;
        top:75px;
   }
   #front{
       transform: translateZ(150px);
   }
   #box:hover #front{
    transform: translateZ(240px);
   }


   #back{
       transform: translateZ(-150px);
   }
   #box:hover #back{
    transform: translateZ(-240px);
   }
   #top{
    
    transform: translateY(-150px) rotateX(90deg);

        }
        #box:hover #top{
        transform: translateY(-240px) rotateX(90deg);
        }
    #bottom{
    transform: translateY(150px) rotateX(90deg) ;
    }
    #box:hover #bottom{
        transform: translateY(240px) rotateX(90deg);
        }
   
    #left{
    
    transform: translateX(-150px) rotateY(90deg);

    }
    #box:hover #left{
        transform: translateX(-240px) rotateY(90deg);
        }
    #right{
    transform: translateX(150px) rotateY(90deg);
    }
    #box:hover #right{
        transform: translateX(240px) rotateY(90deg);
        }

    #s-front{
       transform: translateZ(75px);
        }
 


   #s-back{
       transform: translateZ(-75px);
   }
   
   #s-top{
    
    transform: translateY(-75px) rotateX(90deg);

        }
       
    #s-bottom{
    transform: translateY(75px) rotateX(90deg) ;
    }
   
   
    #s-left{
    
    transform: translateX(-75px) rotateY(90deg);

    }
   
    #s-right{
    transform: translateX(75px) rotateY(90deg);
    }
  





   </style>
   </head>
<body>
    <div id="box">
       <img src="1.1.jpg" alt="" class="pic" id="front">
       <img src="1.2.jpg" alt="" class="pic" id="back">
       <img src="1.3.jpg" alt="" class="pic" id="top">
       <img src="1.4.jpg" alt="" class="pic" id="bottom">
       <img src="1.5.jpg" alt="" class="pic" id="left">
       <img src="1.6.jpg" alt="" class="pic" id="right">

        <img src="1.jpg"  alt="" class="spic"  id="s-front">
        <img  src="2.jpg" alt="" class="spic"  id="s-back" >
        <img src="3.jpg"  alt="" class="spic"  id="s-top">
        <img src="4.jpg"  alt="" class="spic"  id="s-bottom">
        <img src="5.jpg"  alt="" class="spic"  id="s-left">
        <img src="6.jpg"  alt="" class="spic"  id="s-right">






    </div>






</body>
</html>